<template>
  <div>
    <!-- <el-form :model="queryForm" > -->
      <!-- <el-row style="margin-bottom: 10px;" type="flex" class="row-bg" justify="end">
        <el-button type="primary"  :disabled="compile=='审核'||compile=='查看'"  @click="addMore">{{$t('添加更多')}}</el-button>
      </el-row>  -->
      <edu-table
          :pagination="false"
          :order="false" 
          :selection="false"
          :tooltipEffect="tooltipEffect"
          stripe
          :data="tableDataList"
          size="mini"
        >
          <edu-table-column :label="$t('projectDeclara.preparing')" prop="personnelCost">
            <template slot-scope="scope">
                <el-form-item  style="margin-top: 15px;" :prop="'tableDataList.' + scope.$index + '.personnelCost'" label-width="0" :rules="rulesOne.personnelCost" >
                  <el-tooltip class="item" effect="light" :content="scope.row.personnelCost" placement="top" :disabled="scope.row.personnelCost ? false : true">
                    <el-input :disabled="compile==='审核'||compile==='查看'"
                        v-model.trim="scope.row.personnelCost" 
                        clearable
                        maxlength="64" >
                    </el-input>
                  </el-tooltip>
                </el-form-item>
            </template>
          </edu-table-column>
          <!-- <edu-table-column :label="$t('projectDeclara.jobContent')" prop="workContent" >
            <template slot-scope="scope">
                <el-form-item  style="margin-top: 15px;" :prop="'tableDataList.' + scope.$index + '.workContent'" label-width="0" :rules="rulesOne.workContent" >
                  <el-input :disabled="compile=='审核'||compile=='查看'"
                      v-model.trim="scope.row.workContent" 
                      clearable
                      maxlength="64" >
                  </el-input>
                </el-form-item>
            </template>
          </edu-table-column> :rules="rulesOne.budget"-->
          <edu-table-column :label="$t('projectDeclara.money')" prop="budget" >
            <template slot-scope="scope">
                <el-form-item  style="margin-top: 15px;" :prop="'tableDataList.' + scope.$index + '.budget'" label-width="0"  >
                  <el-input @change="changeBudget(scope.row,scope.$index)"
                      v-model.trim="scope.row.budget" :disabled="compile==='审核'||compile==='查看'"
                      clearable
                      maxlength="9" >
                  </el-input>
                </el-form-item>
            </template>
          </edu-table-column>
          <edu-table-column :label="$t('projectDeclara.estimatBasis')" prop="remark" >
            <template slot-scope="scope">
                <el-form-item style="margin-top: 15px;" :prop="'tableDataList.' + scope.$index + '.remark'" label-width="0" :rules="rulesOne.remark" >
                  
                  <el-tooltip class="item" effect="light" :content="scope.row.remark" placement="top" :disabled="scope.row.remark ? false : true">
                    <el-input 
                        v-model.trim="scope.row.remark" :disabled="compile==='审核'||compile==='查看'"
                        clearable
                        maxlength="200" >
                    </el-input>
                  </el-tooltip>
                </el-form-item>
            </template>
          </edu-table-column>
          <edu-table-column :label="$t('common.text.operation')" fit width="150">
            <template slot-scope="props">
              <el-button type="text" :disabled="compile==='审核'||compile==='查看'"  @click="emptyAssignment(props.row, props.$index)">清空</el-button>
              
            </template>
          </edu-table-column>
      </edu-table>
    <!-- </el-form> -->
  </div>
</template>
<script>

export default {
  props: {
      compile: {
          type: String,
          default: ''
      },
      index: {
          type: Number,
          default: 0
      },
      activeName: {
          type: String,
          default: ''
      },
      labeList: {
          type: String,
          default: ''
      },
      dataList: {
          type: Object,
          default: () => {}
      },
      objList: {
          type: Object,
          default: () => {}
      },
      tableData: {
          type: Array,
          default: () => []
      },
      requireInput: {
        type: Boolean,
        default: true
      }
  },
  data() {
    let cannotEnter = (rule, value, callback) => {
        let reg = /[`$]/im
        if (reg.test(value)) {
            return callback(new Error(this.$t('identificationToDoList.cannotContain')))
        } 
        return callback()
    }
    return{
      valFee: 0,
      tableDataList: [],
      queryForm: {},
      rulesOne: {
        personnelCost: [
          { validator: cannotEnter, trigger: 'blur' }
        ],
        workContent: [
          { validator: cannotEnter, trigger: 'blur' }
        ],
        remark: [
          { validator: cannotEnter, trigger: 'blur' }
        ],
        budget: [
          { validator: this.validateWeight, trigger: 'blur' }
        ]
      },
    };
  },
  filters: {
    collegeAcademyList(val, array) {
      let str = "";
      for (let item of array) {
        if (val === item.value) {
          str = item.label;
        }
      }
      return str;
    }
  },
  watch: {
    tableData: {
      handler:function(newVal,oldVal) {
        this.tableDataList = JSON.parse(JSON.stringify(newVal))
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    addMore() {
      this.$emit('change-addMore', this.tableDataList)
    },
    // 清空
    emptyAssignment(data, index) {
      // this.$emit('change-empty', index)
      for (let key in data) {
        if (key=='personnelCost') {
          data.personnelCost = ''
        } 
        if (key=='remark') {
          data.remark = ''
        } 
        if (key=='budget') {
          data.budget = ''
        } 
      }
    },
    setIntervalDate() {
      setInterval(() => {
        // console.log(this.tableDataList, 'this.tableDataList999');
        // this.changeTbel()
        // this.calculateMoney()
      }, 1000)
    },
    // 关闭弹框
    handleClose() {
      this.dialogVisible = false
    },
    changeBudget(data, index) {
      if (data.budget > 0) {
        // let expReg = /^([1-9][0-9]*)+(.[0-9]{1,2})?$/
        let expReg = /^[1-9]$|^([0-9])+(.[0-9]{1,2})?$/
        if (!expReg.test(data.budget)) {
          // callback(new Error(this.$t('projectDeclara.decimalPlace')))
          // this.$set(data,'budget','')
          this.tableDataList[index].budget = null
          return this.$message.warning(this.$t('projectDeclara.decimalPlace'))
        } 
        // else {
        //   callback()
        // }
      } else {
        this.tableDataList[index].budget = null
        return this.$message.warning(this.$t('projectDeclara.decimalPlace'))
        // callback(new Error(this.$t('projectDeclara.decimalPlace')))
      }
    },
    validateWeight(rule, value, callback) {
      if (value > 0) {
        // let expReg = /^([1-9][0-9]*)+(.[0-9]{1,2})?$/
        let expReg = /^[1-9]$|^([0-9])+(.[0-9]{1,2})?$/
        if (!expReg.test(value)) {
          callback(new Error(this.$t('projectDeclara.decimalPlace')))
        } else {
          callback()
        }
      } else {
        callback(new Error(this.$t('projectDeclara.decimalPlace')))
      }
    },
    changeTbel() {
        // this.queryForm.list = this.tableDataList
        this.$emit('change-tab', this.tableDataList, this.index)
    },
    // 计算表格总金额
    calculateMoney() {
        let _this = this
        this.valFee = 0
        let list = []
        _this.tableDataList.forEach(el => {
          if (el.personnelCost || el.budget || el.remark) {
            if (el.personnelCost && el.budget && ((el.remark && _this.requireInput) || !_this.requireInput)) {
              if (el.budget) {
                this.valFee+=Math.round(Number(el.budget)*100)/100 
                // this.valFee+=Number(el.budget) 
              }
            } else {
              list.push(false)
            }
          }
          // if (el.personnelCost || el.budget || el.remark) {
          //   if (el.personnelCost&&el.budget&&el.remark) {
          //     if (el.budget) {
          //       this.valFee+=Math.round(Number(el.budget)*100)/100 
          //       // this.valFee+=Number(el.budget) 
          //     }
          //   } else {
          //     list.push(false)
          //   }
          // }
        })
        
        if (list.includes(false)) {
          this.$emit('valFee-false',true)
          return this.$message.warning('请检查'+this.labeList+'数据是否填写完整')
        } else {
          this.$emit('valFee-click',this.valFee, this.index)
          this.$emit('valFee-false',false)
        }
        // Math.round(this.valFee*100)/100
        // localStorage.setItem("tableDataList", JSON.stringify(this.tableDataList))
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.personal {
	border-collapse: collapse;
	border: 1px solid #000000;
	margin: 20px;
	td,
	th {
		line-height: 30px;
		border-collapse: collapse;
		border: 1px solid #a5a5a5;
		background: #fff;
		color: #606266;
	}
	label {
		color: #999;
    }
    .courseTemplate-td1 {
       width:20%;
       background: #F5F7F9;
       text-align: center;
    }
    .courseTemplate-td2 {
       width:20%;
       background: #fdfeff;
       text-align: center;
    }
}
.p_cals:hover{
  cursor: pointer;
  color: #409eff;
}
.p_cals{
  color: #aaa
}
.inner-breadcrumb {
    .breadcrumb {
        span {
            font-weight: normal;
            color: #aaa;
        }
        a {
            font-weight: normal;
            color: #aaa;
        }
        a:hover {
            color: #409eff;
        }
        .last {
            font-weight: bold !important;
            cursor: default !important;
        }
        .disable {
            cursor: default !important;
        }
    }
}
.condition-title-p {
    font-weight: 400;
    font-style: normal;
    color: #2b3b4e;
    font-size: 18px;
    margin-bottom: 15px;
}
.base-info-title {
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #2b3b4e;
}
.table-style-baseinfo {
    background-color: rgba(210, 212, 214, 1);
    box-sizing: border-box;
    border-width: 0.5px;
    border-style: solid;
    border-color: rgba(210, 212, 214, 1);
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #8896a7;
    margin-bottom: 20px;
}

.table-style-baseinfo td {
    width: 25%;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #2b3b4e;
    height: 32px;
    padding: 0 10px;
}

.table-style-baseinfo .text-right-background-color {
    background-color: #fdfeff4d;
    text-align: right;
}

.text-left-background-none {
    text-align: left;
}
</style>